{{ define "email.to.html"  }}
<!DOCTYPE html>
<html>
<head>
  <style>
    .alert-table {
      border-collapse: collapse; 
      width: 100%;
      margin: 20px 0;
    }
    .alert-table th {
      background-color: #f5f7fa;
      padding: 12px;
      text-align: left;
    }
    .alert-table td {
      padding: 10px;
      border-bottom: 1px solid #e4e7ed;
    }
    .critical { color: #ff4d4f; }
    .warning { color: #faad14; }
  </style>
</head>
<body>
  <h3>系统告警通知（{{ .Status | title }}）</h3>
  
  <table class="alert-table">
    <tr>
      <th>告警名称</th>
      <td>{{ .CommonLabels.alertname  }}</td>
    </tr>
    <tr>
      <th>触发时间</th>
      <td>{{ (.Alerts.FiringAt.UTC.Add 28800e9).Format "2006-01-02 15:04:05" }} (UTC+8)</td>
    </tr>
    <tr>
      <th>实例地址</th>
      <td>{{ .CommonLabels.instance  }}</td>
    </tr>
    {{ range .Alerts }}
    <tr>
      <th>告警详情</th>
      <td class="{{ .Labels.severity  }}">
        {{ .Annotations.description  }}
      </td>
    </tr>
    {{ end }}
  </table>
</body>
</html>
{{ end }}
